<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Adminique - admin template</title>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/skins/blue.css" title="blue">

<link rel="alternate stylesheet" type="text/css" href="css/skins/orange.css" title="orange">
<link rel="alternate stylesheet" type="text/css" href="css/skins/red.css" title="red">
<link rel="alternate stylesheet" type="text/css" href="css/skins/green.css" title="green">
<link rel="alternate stylesheet" type="text/css" href="css/skins/purple.css" title="purple">
<link rel="alternate stylesheet" type="text/css" href="css/skins/yellow.css" title="yellow">
<link rel="alternate stylesheet" type="text/css" href="css/skins/black.css" title="black">
<link rel="alternate stylesheet" type="text/css" href="css/skins/gray.css" title="gray">

<link rel="stylesheet" type="text/css" href="css/superfish.css">
<link rel="stylesheet" type="text/css" href="css/uniform.default.css">
<link rel="stylesheet" type="text/css" href="css/jquery.wysiwyg.css">
<link rel="stylesheet" type="text/css" href="css/facebox.css">
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.8.custom.css">

<!--[if lte IE 8]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<script type="text/javascript" src="js/excanvas.min.js"></script>
<![endif]-->

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Delicious_500.font.js"></script>
<script type="text/javascript" src="js/jquery.flot.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/facebox.js"></script>

<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>

</head>
<body>

<header id="top">
	<div class="container_12 clearfix">
		<div id="logo" class="grid_5">
			<!-- replace with your website title or logo -->
			<a id="site-title" href="dashboard.html"><span>Admin</span>ique</a>
			<a id="view-site" href="#">View Site</a>
		</div>
		
		<div class="grid_4" id="colorstyle">
			<div>Change Color</div>
			<a href="#" rel="blue"></a>
			<a href="#" rel="green"></a>
			<a href="#" rel="red"></a>
			<a href="#" rel="purple"></a>
			<a href="#" rel="orange"></a>
			<a href="#" rel="yellow"></a>
			<a href="#" rel="black"></a>
			<a href="#" rel="gray"></a>
		</div>

		<div id="userinfo" class="grid_3">
			Welcome, <a href="#">Administrator</a>
		</div>
	</div>
</header>

<nav id="topmenu">
	<div class="container_12 clearfix">
		<div class="grid_12">
			<ul id="mainmenu" class="sf-menu">
				<li><a href="dashboard.html">Dashboard</a></li>
				<li><a href="styles.html">Styles</a></li>
				<li><a href="tables.html">Tables</a></li>
				<li><a href="forms.html">Forms</a></li>
				<li class="current"><a href="#">Sample Pages</a>
					<ul>
						<li><a href="news.html">News</a></li>
						<li class="current"><a href="gallery.html">Photo Gallery</a></li>
						<li><a href="settings.html">Settings</a></li>
						<li><a href="login.html">Login</a></li>
					</ul>
				</li>
				<li><a href="#">Layout Width</a>
					<ul id="layoutwidth">
						<li><a href="#" rel="fixed">Fixed</a></li>
						<li><a href="#" rel="fluid">Fluid</a></li>
					</ul>
				</li>
			</ul>
			<ul id="usermenu">
				<li><a href="#" class="inbox">Inbox (3)</a></li>
				<li><a href="#">Logout</a></li>
			</ul>
		</div>
	</div>
</nav>

<section id="content">
	<section class="container_12 clearfix">
		<section id="main" class="grid_9 push_3">
			<article>
				<h1>Photo Gallery</h1>
				<ul class="photos sortable">
					<li>
						<img src="images/photos/photo_01.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_02.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_03.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_04.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_05.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_06.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_07.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_08.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_09.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_10.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_11.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_12.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_13.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_14.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_15.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_16.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_17.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_18.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_19.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
					<li>
						<img src="images/photos/photo_20.jpg" width="100" height="100" />
						<div class="links">
							<a href="images/photos/detail-photo.jpg" rel="facebox">View</a>
							<a class="delete" href="#">Delete</a>
						</div>
					</li>
				</ul>
				<div class="pagination">
					<a href="#" class="current">1</a>
					<a href="#">2</a>
					<a href="#">3</a>
					<a href="#">Next</a>
				</div>
			</article>
			
			<article>
				<h1>Photo Detail</h1>
				<form>
					<dl>
						<dt><label>Photo:</label></dt>
						<dd><img src="images/photos/detail-photo.jpg" /></dd>

						<dt><label for="photo_title">Title:</label></dt>
						<dd><input type="text" name="title" id="photo_title" class="medium" /></dd>

						<dt><label for="photo_desc">Description:</label></dt>
						<dd><textarea name="description" id="photo_desc" class="medium" rows="5">This is description</textarea></dd>
					</dl>
					<button class="button">Save</button>
					<button class="button white">Cancel</button>
				</form>
			</article>
			
			<article>
				<h1>Upload</h1>
				<form class="uniform">
					<dl>
						<dt><label for="photo_file">Photo File:</label></dt>
						<dd><input type="file" id="photo_file" /></dd>

						<dt><label for="photo_title2">Title:</label></dt>
						<dd><input type="text" name="title" id="photo_title2" class="medium" /></dd>

						<dt><label for="photo_desc2">Description:</label></dt>
						<dd><textarea name="description" id="photo_desc2" class="medium" rows="5"></textarea></dd>
					</dl>
					<button class="button">Upload</button>
					<button class="button white">Cancel</button>
				</form>
			</article>
		</section>
		
		<aside id="sidebar" class="grid_3 pull_9">
			<div class="box search">
				<form>
					<label for="s">Search:</label>
					<input id="s" type="text" size="20" />
					<button class="button small">Go</button>
				</form>
			</div>
			<div class="box menu">
				<h2>Side Menu</h2>
				<section>
					<ul>
						<li><a href="#">Menu Item 1</a></li>
						<li><a href="#">Menu Item 2</a></li>
						<li><a href="#">Menu Item 3</a></li>
						<li><a href="#">Menu Item 4</a></li>
						<li><a href="#">Menu Item 5</a>
							<ul>
								<li><a href="#">Menu Item 5.1</a></li>
								<li><a href="#">Menu Item 5.2</a>
									<ul>
										<li><a href="#">Menu Item 5.2.1</a></li>
										<li><a href="#">Menu Item 5.2.2</a></li>
									</ul>
								</li>
								<li><a href="#">Menu Item 5.3</a></li>
							</ul>
						</li>
						<li><a href="#">Menu Item 6</a></li>
					</ul>
				</section>
			</div>
			<div class="box info">
				<h2>Info</h2>
				<section>
					Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
				</section>
			</div>
			<div class="box">
				<h2>Lorem Ipsum</h2>
				<section>
					Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
				</section>
			</div>
		</aside>
	</section>
</section>

<footer id="bottom">
	<section class="container_12 clearfix">
		<div class="grid_6">
			<a href="#">Menu 1</a>
			&middot; <a href="#">Menu 2</a>
			&middot; <a href="#">Menu 3</a>
			&middot; <a href="#">Menu 4</a>
		</div>
		<div class="grid_6 alignright">
			Copyright &copy; 2011 <a href="#">YourCompany.com</a>
		</div>
	</section>
</footer>

</body>
</html>